<template>
  <div class="advantage">
    <h1>我们的优势</h1>
    <div class="advantage-content">
      <div class="img">
        <img class="pic" src="@/assets/img/large.png" />
        <span class="inner-content">海量人才匹配</span>
      </div>
      <div class="inner-text">
        <div class="advantage-item">
          <div class="advantage-title">
            <div class="one">用户上的优势</div>
            <div class="two"></div>
            <div class="three"></div>
          </div>
          <div class="advantage-text">
            <div class="one">
              用户既可以是项目或者活动的发布者也可以是其接单者。
              本网站对于外业人员关心，在需要项目开发时可以自主选择对项目分解成多个小活动。项目分解是可以是接单用户完成。发布者有能力可以自行完成。
            </div>
            <div class="two"></div>
            <div class="three"></div>
          </div>
        </div>
        <div class="advantage-item">
          <div class="advantage-title">
            <div class="one">开发上的优势</div>
            <div class="two"></div>
            <div class="three"></div>
          </div>
          <div class="advantage-text">
            <div class="one">
              本网站主要将一个项目分解成多个小活动去完成，接单者可以选择不同项目的不同或者相似活动去完成接单任务，对于接单者的技术全面性要求减弱，更好的发挥自身技能。
            </div>
            <div class="two"></div>
            <div class="three"></div>
          </div>
        </div>
      </div>
      <div class="img">
        <img  class="pic" src="@/assets/img/zy.png" />
        <span class="inner-content">细致项目描述</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup></script>

<style lang="less" scoped>
.advantage {
  text-align: center;
  background-color: #f7fbff;

  h1 {
    font-size: 50px;
    padding: 45px 0;
    letter-spacing: 8px;
  }
  .advantage-content {
    display: flex;
    justify-content: space-around;
    .img {
      width: 260px;
      height: 300px;
      .pic {
        width: 280px;
        height: 280px;
      }
      .inner-content {
        font-size: 20px;
      }
    }
    .inner-text {
      width: 690px;
      .advantage-item {
        height: 260px;
        position: relative;
      }

      .advantage-title {
        position: absolute;
        font-size: 30px;
        width: 230px;
        height: 90px;
        line-height: 80px;
        color: #f7f8f9;
        border-radius: 5px;
        background-color: #8bccf2;
        .one {
          position: absolute;
          width: 100%;
          height: 100%;
          z-index: 3;
        }
        .two {
          position: absolute;
          width: 100%;
          height: 100%;
          border-radius: 5px;
          background-color: #8bccf2ad;
          transform: translateX(-10px) translateY(-10px);
          z-index: 1;
        }
        .three {
          position: absolute;
          width: 100%;
          height: 100%;
          background-color: #8bccf25f;
          border-radius: 5px;
          transform: translateX(-20px) translateY(-20px);
          z-index: 0;
        }
      }
      .advantage-text {
        position: absolute;
        right: 10px;
        display: flex;
        align-items: center;
        text-align: justify;
        text-justify: inter-ideograph;
        text-indent: 2.4em;
        letter-spacing: 0.2em;
        top: 68px;
        width: 460px;
        height: 130px;
        color: #f0f2f5;
        font-size: 16px;
        border-radius: 5px;
        font-weight: 700;
        background-color: #96d1f5;
        .one {
          position: absolute;
          z-index: 3;
          border-radius: 5px;
          padding: 0 10px;
        }
        .two {
          position: absolute;
          width: 100%;
          height: 100%;
          border-radius: 5px;
          background-color: #96d1f562;
          transform: translateX(10px) translateY(10px);
          z-index: 2;
        }
        .three {
          position: absolute;
          width: 100%;
          height: 100%;
          border-radius: 5px;
          background-color: #96d1f53a;
          transform: translateX(20px) translateY(20px);
          z-index: 1;
        }
      }
    }
  }
}
</style>
